<template>
  <div class="app-container flex-column">
    <div class="flex-between mt10 mb10">
      <div></div>
      <div>
        <el-button type="primary" @click="newDictData">新增</el-button>
        <el-button type="primary" :disabled="getindex==-1" @click="EditDictData">编辑</el-button>
        <el-button type="primary" :disabled="getindex==-1" @click="handleDelete">删除</el-button>
      </div>
    </div>
    <div style="flex: 1;">
      <el-table :data="tableList" :height="tableheight" border stripe @row-click="getrow"
        :row-class-name="tableRowClassName" highlight-current-row style="height: 100%;">
        <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
          <template scope="scope">
            <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="字典标签" width="120" header-align="center" prop="dict_label">
          <template slot-scope="scope">
            <span v-if="scope.row.list_class == '' || scope.row.list_class == 'default'">{{scope.row.dict_label}}</span>
            <el-tag v-else
              :type="scope.row.list_class == 'primary' ? '' : scope.row.list_class">{{scope.row.dict_label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="字典键值" header-align="center" prop="dict_value" />
        <el-table-column label="状态" width="100" header-align="center" align="center" prop="status"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="备注" header-align="center" prop="remark" show-overflow-tooltip />
        <el-table-column label="创建时间" header-align="center" prop="createtime" width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mb20">
      <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
        @pagination="getList" />
    </div>

    <edit :dialogedit.sync="dialogedit" :ruleform="ruleform" :dict_type="dictType" @reload="getList" />
  </div>
</template>

<script>
  import {
    listData,
    delData
  } from '@/api/system/dict/data';
  import {
    getType
  } from '@/api/system/dict/type';
  import edit from './edit';
  export default {
    name: "dict-data",
    components: {
      edit
    },
    dicts: ['sys_normal_disable'],
    data() {
      return {
        total: 0,
        currentpage: 1,
        pagesize: 100,
        // 岗位表格数据
        dictType: '',
        dict_name: '',
        tableList: [],
        tableheight: 400,
        // 查询参数
        queryParams: {},
        getindex: -1,
        ruleform: {},
        dialogedit: false
      };
    },
    created() {

      const dictId = this.$route.params && this.$route.params.dictId;
      this.getType(dictId);
    },
    mounted() {
      this.$nextTick(() => {
        this.settableheiht();
        window.onresize = () => {
          this.settableheiht();
        };
      });
    },
    methods: {

      /** 删除按钮操作 */
      handleDelete() {
        if (this.getindex >= 0) {
          let row = this.tableList[this.getindex];
          const dict_label = row.dict_label;
          var Params = {
            dict_code: row.dict_code,
            dict_type:this.dictType
          }
          this.$modal
            .confirm(`是否确认删除?参数名称:${dict_label}？`)
            .then(function() {
              return delData(Params);
            })
            .then(() => {
              this.getList();
              this.$modal.msgSuccess('删除成功');
            })
            .catch(() => {});
        }

      },
      /** 修改岗位列表 */
      EditDictData() {
        if (this.getindex >= 0) {
          let row = this.tableList[this.getindex];
          this.ruleform = {
            dict_code: row.dict_code,
            dict_label: row.dict_label,
            dict_value: row.dict_value,
            css_class: row.css_class,
            list_class: row.list_class,
            dict_type: row.dict_type,
            status: row.status,
            remark: row.remark,
          }
          this.dialogedit = true;
        }
      },
      /** 新增岗位列表 */
      newDictData() {
        this.ruleform = {
          dict_code: 0,
          dict_label: "",
          dict_value: "",
          css_class: "",
          list_class: "",
          dict_type: this.dictType,
          status: "",
          remark: "",
        }
        this.dialogedit = true;
      },
      /** 查询字典类型详细 */
      getType(dictId) {
        var Params = {
          dict_id: dictId
        }
        getType(Params).then(response => {
          this.dictType = response.dict_type;
          this.dict_name = response.dict_name;
          let visitedViews = this.$store.state.tagsView.visitedViews;
          visitedViews.some(v => {
            if (v.path == this.$route.path) {
              v.title = v.meta.title + "-" + this.dict_name;
            }
          })

          this.getList();
        });
      },
      /** 查询岗位列表 */
      getList() {
        this.getindex = -1;
        var Params = {
          page: this.currentpage,
          pagesize: this.pagesize,
          dict_type: this.dictType
        }
        listData(Params).then(response => {
          this.tableList = response.rows;
          this.total = parseInt(response.total);
        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      },
      handleRefreshCache() {
        refreshCache().then(() => {
          this.$modal.msgSuccess("刷新成功");
        });
      },
      settableheiht() {
        var clientHeight = document.body.clientHeight;
        clientHeight = clientHeight - 220;
        this.tableheight = clientHeight;
      }
    }
  };
</script>